<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	 <style>
	        #targetDiv {
	            width: 200px;
	            height: 200px;
				margin-left: 600px;
				margin-top: 20px;
	            background-color: #f1f1f1;
	            position: relative;
	        }
	
	        #popupDiv {
	            height: 100px;
	            background-color: #ddd;
	            position: absolute;
	            display: none;
	        }
	    </style>
	</head>
	<body>
	    <div id="targetDiv"></div>
	    <div id="popupDiv"></div>
	
	    <script>
	        var targetDiv = document.getElementById('targetDiv');
	        var popupDiv = document.getElementById('popupDiv');
	
	        targetDiv.addEventListener('click', function() {
				
	            popupDiv.style.display = 'block';
				
				popupDiv.style.left = targetDiv.offsetLeft + "px";
				popupDiv.style.width = targetDiv.offsetWidth +"px";
				popupDiv.style.top = targetDiv.offsetTop + targetDiv.offsetHeight + "px";
	        });
	
	        document.addEventListener('click', function(event) {
	            var targetElement = event.target;
	
	            // 检查点击事件是否发生在其他 <div> 元素区域以外
	            if (targetElement !== targetDiv && targetElement !== popupDiv) {
	                popupDiv.style.display = 'none';
	            }
	        });
	    </script>
	</body>
</html>